<template>
  <div class="user-view">
    <el-table
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :data="tableData"
      style="width: 100%"
      :row-style="rowStyle"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0)"
    >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="uid" label="UID"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      loading: true,
      facility: {},
      headerCellStyle: {
        background: "#000034",
      },
      cellStyle: {
        background: "#032241",
      },
      rowStyle: {
        background: "#032241",
      },
    };
  },
  computed: {
    tableData() {
      return this.facility.clients;
    },
  },
  methods: {
    async fetchUser() {
      try {
        const res = await request({
          url: "/api/admins/clients",
          method: "GET",
        });
        this.loading = false;
        this.facility = res.data;
      } catch (error) {
        this.loading = false;
        console.error(error);
        this.$message.error("获取设备列表失败");
        return false;
      }
    },
  },
  async mounted() {
    await this.fetchUser();
  },
};
</script>
